<template>
  <a-modal
    :title="modelTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :afterClose="modelClosed"
    :maskClosable="false"
    :width="800"
    destroyOnClose
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model ref="formRef" :model="form" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="指标名称" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="地区" prop="range">
        <a-select
          placeholder="请选择地区"
          optionFilterProp="children"
          :showSearch="true"
          mode="default"
          v-model="form.range"
        >
          <a-select-option :value="item.value" v-for="(item, index) in rangeList" :key="index">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="内容1">
        <WangEditor
          ref="WangeEditorRef"
          v-model="form.content"
          :height="300"
          :disabled="editorDisabled"
          :customUploadImg="customUploadImg"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
// import { addIndex, updateIndex } from '@/api/targetTerm'
import { rangeList } from '../components/map'
import { WangEditor } from '@/components'

export default {
  components: {
    WangEditor
  },
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    modelTitle: {
      type: String,
      default: 'Model'
    }
  },
  model: {
    prop: 'visible',
    event: 'hidenModel'
  },
  data() {
    return {
      editorDisabled: false,
      form: {},
      rangeList: rangeList,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,
      formRules: {
        name: [
          {
            required: true,
            message: '请输入指标名称',
            trigger: ['blur']
          }
        ],
        range: [{ required: true, message: '请选择单位', trigger: ['change'] }]
      }
    }
  },
  mounted() {},
  methods: {
    initForm(_params) {
      this.form = JSON.parse(JSON.stringify(_params))
      this.$emit('hidenModel', true)
    },
    modelClosed() {
      this.restForm()
    },
    handleOk() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id) {
            this.upDataHandler(this.form)
          } else {
            this.addHandler(this.form)
          }
        }
      })
    },
    customUploadImg(fileList, insertImgFn) {
      // 模拟上传的请求方法
      function uploadApi(_params) {
        return new Promise(reslove => {
          const result = {
            code: 0,
            data: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4071856393,775589625&fm=26&gp=0.jpg',
            msg: 'success'
          }
          reslove(result)
        })
      }
      // 上传文件
      fileList.forEach(element => {
        uploadApi({
          file: new Date().valueOf() + '' + Math.floor(Math.random() * 10000),
          data: element
        }).then(res => {
          console.log('--customUploadImg-')
          // 插入上传成功的图片
          insertImgFn(res.data)
        })
      })
    },
    addHandler(_params) {
      // addIndex(_params)
      //   .then(() => {
      //     this.handleCancel()
      //     this.$message.success('添加成功')
      //     this.$emit('confirmHandle', true)
      //   })
      //   .catch(() => {
      //     this.confirmLoading = false
      //   })
    },
    upDataHandler(_params) {
      // updateIndex(_params)
      //   .then(res => {
      //     console.log(res, 'update')
      //     this.handleCancel()
      //     this.$message.success('更新成功')
      //     this.$emit('confirmHandle', false)
      //   })
      //   .catch(() => {
      //     this.confirmLoading = false
      //   })
    },
    handleCancel() {
      this.$emit('hidenModel', false)
    },
    restForm() {
      this.form = {}
      this.$refs['formRef'].resetFields()
      this.confirmLoading = false
    }
  }
}
</script>
